import React from 'react'
import { Button, Checkbox, Form, Input } from 'antd';
import request from '../../api/request'
import { useNavigate } from 'react-router-dom';

function Index() {
  let nav=useNavigate()
  const onFinish = (values) => {
  console.log('Success:', values);
  let {username,password}=values
  request.post('/login',{username:username,password:password}).then(res=>{
     console.log(res)
     if(res.data.code===1){
        alert(res.data.message)
        localStorage.setItem('token',res.data.token)
        request.get('/getUserInfo').then(res=>{
          console.log(res)
          let {name,pic}=res.data.data 
          localStorage.setItem('name',name)
          localStorage.setItem('pic',pic)
          setTimeout(()=>{
               nav('/home/index')
          },3000)
        })
     }else{
      alert('登录失败')
     }
  })
};
const onFinishFailed = (errorInfo) => {
  console.log('Failed:', errorInfo);
};
  return (
    <div>
      <Form
    name="basic"
    labelCol={{
      span: 8,
    }}
    wrapperCol={{
      span: 16,
    }}
    style={{
      maxWidth: 600,
    }}
    initialValues={{
      remember: true,
    }}
    onFinish={onFinish}
    onFinishFailed={onFinishFailed}
    autoComplete="off"
  >
    <Form.Item
      label="账号"
      name="username"
      rules={[
        {
          required: true,
          message: '请输入账号!',
        },
        {
          pattern:/[a-zA-Z0-9]{6,12}/,
          message:'账号6-12位'

        }
      ]}
    >
      <Input />
    </Form.Item>

    <Form.Item
      label="密码"
      name="password"
      rules={[
        {
          required: true,
          message: '请输入密码!',
        },
         {
          pattern:/[a-zA-Z0-9]{8,16}/,
          message:'密码8-16位'

        }
      ]}
    >
      <Input.Password />
    </Form.Item>


    <Form.Item label={null}>
      <Button type="primary" htmlType="submit">
        登录
      </Button>
    </Form.Item>
  </Form>
    </div>
  )
}

export default Index
